<template>
	<view>
		<view class="user-section">
			<image class="bg" src="/static/bjt.jpg"></image>
			<text class="bg-upload-btn yticon icon-paizhao"></text>
			<view class="portrait-box">
				<image @click="uploadAvatar" class="portrait" :src="userInfo.avatar || '/static/missing-face.png'"></image>
				<span class="class_cover">修改头像</span>

				<text class="pt-upload-btn yticon icon-paizhao"></text>
			</view>
			<view class="user-name-box">
				<text class="username" >{{user_info.userName || '起名的艺术'}}</text>
			</view>
		</view>
		<view class="box">
		</view>
		<view class="input-content">
			<view class="input-item">
				<text class="tit">用户名</text>
				<input 
					type="mobile" 
					v-model="user_info.userName" 
					placeholder="昵称"
					placeholder-class="input-empty"
					maxlength="20"
					data-key="userName"
					@input="inputChange"
					@confirm="toReg"
					@blur="inputBlur"
				/>
			</view>
			<view class="input-item">
				<text class="tit">手机号</text>
				<input 
					type="number" 
					v-model="user_info.phone" 
					placeholder="绑定手机号"
					maxlength="11"
					data-key="phone"
				/>
			</view>
			<view class="input-item">
				<text class="tit">邮箱</text>
				<input 
					type="text" 
					v-model="user_info.email" 
					placeholder="绑定邮箱"
					maxlength="20"
					data-key="email"
				/>
			</view>

		</view>
		<button class="confirm-btn" @click="toSave" :disabled="saveing">保存</button>
	</view>
</template>

<script>
	import {  
	    mapState,  
	    mapMutations  
	} from 'vuex';  
	export default {
		data() {
			return {
				user_info: {
					id : '',
					userName : '',
					password : '',
					avatar : '',
					email : '',
					phone : ''
				},
				saveing: false
			};
		},
		onLoad(option) {
			this.user_info.id = option.id;
			uni.getStorage({
				key: 'userInfo',
				success: function (res) {
				    console.log(res.userName);
				}
			})
		},
		computed:{
			...mapState(['userInfo']),
		},
		methods:{
			...mapMutations(['setAvatar', 'login']),
			inputChange(e) {
				this.user_info.userName = e.detail.value;
				this.saveing = true
			},
			inputBlur(){ //失去焦点事件
				if(this.user_info.userName != undefined && this.user_info.userName != ""){
					
					uni.request({
						url: this.$api_auth +'/checkName',
						data: {
							userName : this.user_info.userName
						},
						header: {
						        'Content-Type': 'application/x-www-form-urlencoded' //自定义请求头信息
						},
						method: 'POST',
						success: (res) => {
							if(res.data.success === "false"){
								this.$api.msg(res.data.msg);
								//this.saveing = true
							}else {
								this.saveing = false
							}
						}
					})
				}else {
					this.$api.msg('用户名不能为空');
					this.saveing = true
				}
				
			},
			uploadAvatar() {
				var currUrl = this.$store.state.userInfo.avatar;
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(chooseImageRes)
				        uni.uploadFile({
				            url: this.$api_user + '/uploadAvatar', //上传头像
				            //url: 'http://localhost:9001/user/uploadAvatar', //上传头像
				            filePath: tempFilePaths[0],
							file: chooseImageRes.tempFiles,
				            name: 'file',
				            formData: {
				                'url': ''
				            },
				            success: (uploadFileRes) => {
								const res = JSON.parse(uploadFileRes.data);
				                console.log(res);
								this.$api.msg(res.msg);
								//this.uploadAvatar(uploadFileRes.data.data)
								console.log(res.data)
								this.$store.commit('setAvatar', 'http://47.114.97.182/' + res.data)
				            }
				        });
				    }
				});
			},
			toSave() {
				console.log(this.user_info)
				this.saveing = true
				uni.request({
					url: this.$api_user +'/update',
					data: {
						id : this.user_info.id,
						userName :  this.user_info.userName,
						avatar : this.$store.state.userInfo.avatar,
						phone : this.user_info.phone,
						email : this.user_info.email
					},
					method: 'POST',
					success: (res) => {
						console.log(res)
						if(res.data.success === "true"){
							this.$api.msg(res.data.msg);
							console.log(res.data.data)
							this.login(res.data.data);
							uni.switchTab({
							    url: '../user/user'
							});
						}else {
							this.$api.msg(res.data.msg);
						}
					}
				})
			}
			
		},
		created: function () {
		    uni.request({
		    	url: this.$api_user +'/get/' + this.user_info.id,
		    	method: 'GET',
		    	success: (res) => {
		    		if(res.data.success === "true"){
		    			this.user_info = res.data.data;
		    			console.log(this.user_info)
		    		}else {
		    			this.$api.msg('查无此人');
		    		}
		    	}
		    })
		}
		
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
	}
	.input-content{
		padding: 0 60upx;
	}
	.input-item{
		display:flex;
		flex-direction: column;
		align-items:flex-start;
		justify-content: center;
		padding: 0 30upx;
		background:$page-color-light;
		height: 120upx;
		border-radius: 4px;
		margin-bottom: 50upx;
		border: solid 1px $image-bg-color;
		&:last-child{
			margin-bottom: 0;
		}
		.tit{
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm+2upx;
			color: $font-color-base;
		}
		input{
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
		}	
	}
	
	.confirm-btn{
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 70upx;
		background: $uni-color-primary;
		color: #fff;
		font-size: $font-lg;
		&:after{
			border-radius: 100px;
		}
	}
	.user-name-box{
		height: 180upx;
		display:flex;
		align-items:center;
		position:relative;
		z-index: 1;
		.portrait{
			width: 130upx;
			height: 130upx;
			border:5upx solid #fff;
			border-radius: 50%;
		}
		.username{
			font-size: $font-lg + 6upx;
			color: $font-color-dark;
			font-weight: 50px;
			text-decoration:underline;
			margin-left: 20upx;
		}
	}
	.user-section{
		display:flex;
		align-items:center;
		justify-content: center;
		height: 460upx;
		padding: 40upx 30upx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
		.portrait-box{
			width: 200upx;
			height: 200upx;
			border:6upx solid #fff;
			border-radius: 50%;
			position:relative;
			z-index: 2;
		}
		.portrait{
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
		.yticon{
			position:absolute;
			line-height: 1;
			z-index: 5;
			font-size: 48upx;
			color: #fff;
			padding: 4upx 6upx;
			border-radius: 6upx;
			background: rgba(0,0,0,.4);
		}
		.pt-upload-btn{
			right: 0;
			bottom: 10upx;
		}
		.bg-upload-btn{
			right: 20upx;
			bottom: 16upx;
		}
		.class_cover {
		    width: 100%;
		    height: 50px;
		    line-height: 50px;
		    padding-left: 5px;
		    background-color: rgba(0, 0, 0, .50);
		    color: #FFFFFF;
		    font-size: 13px;
		    position: absolute;
		    left: -5px;
		    bottom: -10px;
			z-index: -1;
			text-align: center;
			filter: blur(10px);

		}
	}
	.box{
		height: 20px;
	}
	


</style>
